import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import DBConfig from '@CONFIG/DBConfig'
import Images from '@ASSET/Images'
import { renderVideoTime } from '@UTILS/common'
import './VideoImageCard.scss'

export default function VideoImageCard({
  length = 0, fileName, containerClass = '', playClass = '', coverImageClass = ''
}) {
  return (
    <View className={`video-image-container ${containerClass}`}>
      <View className="video-mask" />
      <Image
        mode="aspectFill"
        src={`${DBConfig.staticVideoPreview + fileName}?x-oss-process=image/resize,limit_0,w_360,h_210`}
        className={`video-cover-image ${coverImageClass}`}
      />
      <Image src={Images.video.player} className={`video-player ${playClass}`} />
      {length > 0 && (<Text className="video-total-time">{renderVideoTime(length)}</Text>)}
    </View>
  )
}
